//    侧面图标
const  tu1 = document.querySelector(".tu1")
const  tu2 = document.querySelector(".tu2")
const  tu3 = document.querySelector(".tu3")
const  tu4 = document.querySelector(".tu4")
const  tu5 = document.querySelector(".tu5")

const opi = document.querySelector(".opi")
const opii = document.querySelector(".opi-img")
const opia = document.querySelector(".opi-a")
const opit = document.querySelector(".opi-top")
const opis = document.querySelector(".opi-t")
const opix = document.querySelector(".opi-x")
const icosd = document.querySelector(".icosd")




tu1.onmouseover = function(){
    opi.style.display = "block";      
     
}
opi.onmouseout= function(){
    opi.style.display = "none";      
  
}
tu2.onmouseover = function(){
    opii.style.display = "block";      
    opi.style.display = "none";
}
opii.onmouseout= function(){
    opii.style.display = "none";      
  
}
tu3.onmouseover = function(){
    opia.style.display = "block";      
    opii.style.display = "none";      
}
opia.onmouseout= function(){
    opia.style.display = "none";      
  
}

tu4.onclick = function(){
    opis.style.display = "block";  
    opix.style.display = "block";  

     
}
opix.onclick = function(){
    opis.style.display = "none";  
    opix.style.display = "none";  

}
tu5.onmouseover = function(){
    opit.style.display = "block";  
     
     
}
opit.onmouseout= function(){
    opit.style.display = "none";      
  
}









document.addEventListener("scroll",function(){
  const clientsH = document.documentElement.clientHeight/2 ;
    const r = document.documentElement.scrollTop ;
       if(r>clientsH ){
           tu5.style.display = "block"
        
       }else{
        tu5.style.display = "none"
       }
} ) 






